<template>
  <div class="detail-container">
    <!--头部start-->
    <div class="header-bar">
      <div class="back" @click="$router.go(-1)">
        <img
          src=""
          alt="">
      </div>
      <div class="share">
        <img
          src=""
          alt="">
      </div>
    </div>
    <!--头部end-->
    <!--轮播图start-->
    <v-carousel>
      <v-carousel-item
        v-for="(item,i) in items"
        :key="i"
        :src="item.src"
      ></v-carousel-item>
    </v-carousel>
    <!--轮播图end-->
    <!--商品描述start-->
    <div class="product-detail">
      <div class="product-name">{{$route.params.name}}</div>
      <div class="product-desc">
        <span style="color: #ff4a00; ">「3GB+32GB、4GB+64GB 领券立减50元」	</span>
        4000mAh大电量 / 骁龙632八核处理器 / 6.26"水滴全面屏，德国莱茵 TÜV 认证护眼屏 / 18个月超长质保，康宁第五代大猩猩玻璃盖板 / 支持大字体、大音量模式，收音机、红外遥控功能 /
        1200万AI双摄，1.25μm大像素相机
      </div>
      <div class="product-price">
        {{$route.params.price}}
      </div>
      <div class="product-parameters">
        <div
          class="param-item"
          v-for="i in 14"
          :key="i"
        >
          <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/f0c04e138bfed2b1ebb589de615236d1.png" alt="">
          <div class="param-name">CPU</div>
          <div class="param-value">骁龙845八核</div>
        </div>
      </div>
      <div class="card-box">
        <ul class="product-benefits">
          <li class="title">领券</li>
          <li class="coupons">{{$route.params.name}} 专属50元优惠券</li>
          <li class="arrow"> ></li>
        </ul>
      </div>
      <div class="card-box">
        <ul class="product-benefits" @click="openSheet">
          <li class="title">已选</li>
          <li class="selected">{{$route.params.name}} 6GB+128GB 梦幻蓝 x 1</li>
          <li class="arrow"> ></li>
        </ul>
        <ul class="product-benefits">
          <li class="title">送至</li>
          <li class="coupons"></li>
          <li class="arrow"> ></li>
        </ul>
      </div>
      <img width="100%"
           src="https://i8.mifile.cn/v1/a1/f4102566-3561-1488-f116-e303bbc6e757.webp?w=1080&h=760&bg=F6F5F7" alt="">
      <img width="100%"
           src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/019e93007332ceb9707d30934060661b.jpg?w=1080&h=1281&bg=8C82A4"
           alt="">
      <img width="100%"
           src="https://i8.mifile.cn/v1/a1/652f7e3e-ee3b-6518-655b-81275642fc45.webp?w=1080&h=971&bg=F8F3FA" alt="">
    </div>
    <!--商品描述end-->
    <bottom-sheet :sheet="sheet" :id="$route.params.id" :imgurl="$route.params.imgurl" :name="$route.params.name"
                  :price="$route.params.price"></bottom-sheet>
    <!--底部start-->
    <footer class="footer-tools">
      <div class="footer-flex">
        <dl @click="backHome" class="back-home">
          <dd>
            <img
              src=""
              alt="">
          </dd>
          <dd>首页</dd>
        </dl>
        <dl class="shop-cart" @click="toShopCart">
          <dd>
            <div class="shop-cart-icon">
              <span class="bubble">{{cartCount}}</span>
              <img
                src="">
            </div>
          </dd>
          <dd>购物车</dd>
        </dl>
        <div class="add-to-cart" @click="openSheet">加入购物车</div>
      </div>
    </footer>
    <!--底部end-->
  </div>
</template>

<script>
  import BottomSheet from '@/components/BottomSheet.vue'

  export default {
    components: {BottomSheet},
    data() {
      return {
        sheet: false,
        items: [
          {
            src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/22f848793321e402255af4eba8037da5.jpg'
          },
          {
            src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c5d7a0341d88c0edebc8269b301161e9.jpg'
          },
          {
            src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/36df28faaada581e8cdd530eeef817b9.jpg'
          },
          {
            src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/8742a9e44d82ef8c8a60483c4e4bacbd.jpg'
          }
        ]
      }
    },
    computed: {
      cartCount() {
        return this.$store.getters.getCartTotal
      }
    },
    methods: {
      openSheet() {//打开操作表

        this.$store.commit('setSheetStatus')
      },
      toShopCart(){//跳转购物车页面
        this.$router.push('/shopcart')
      },
      backHome(){//回到首页
        this.$router.push('/home')
      }
    }
  }
</script>

<style lang="scss">
  .detail-container {
    .header-bar {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 10;
      width: 100%;
      height: 50px;

      .back, .share {
        position: absolute;
        top: .2rem;
        width: .6rem;
        height: .6rem;
        border-radius: 50%;
        background: rgba(0, 0, 0, .6);
        padding: 5px;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .back {
        left: .2rem;
      }

      .share {
        right: .2rem;
      }
    }

    .v-carousel__controls {
      background: transparent;
    }

    .product-detail {
      max-width: 7.2rem;
      margin: 0 auto;
      padding: 0 .2rem 1.2rem;
      text-align: left;

      & > div {
        margin: 10px 0;
      }

      .product-name {
        padding: .32rem .03rem 0;
        text-align: left;
        color: black;
        font-size: .4rem;
      }

      .product-desc {
      }

      .product-price {
        position: relative;
        line-height: 1em;
        color: #ff6700;
        font-size: .48rem;
      }

      .product-parameters {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        text-align: center;

        .param-item {
          display: flex;
          flex: 1;
          width: 25%;
          border-right: 1px solid #ccc;
          min-width: 1.68rem;
          padding: 0 .08rem;
          flex-direction: column;

          img {
            display: block;
            margin: 0 auto;
            width: .4rem;
            height: .4rem;
          }

          div {
            color: #676767;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;

            &.param-name {
              font-size: .24rem;
            }

            &.param-value {
              font-size: .18rem;
            }
          }
        }
      }

      .card-box {
        .product-benefits {
          display: flex;
          padding: 0 .32rem;
          background-color: #fafafa;
          border-radius: .16rem;

          li {
            line-height: 45px !important;
            font-size: .24rem !important;
            color: rgba(0, 0, 0, .54);

            &:nth-child(1) {
              flex: 1;
            }

            &:nth-child(2) {
              flex: 5;
              text-align: left;
            }

            &:nth-child(3) {
              flex: 1;
            }

            &.title {
              flex: 1;
            }

            &.coupons {
              color: #f66;
              font-size: .18rem !important;
            }

            &.arrow {
              flex: 1;
              text-align: right;
            }
          }
        }
      }
    }

    .footer-tools {
      position: fixed;
      left: 50%;
      bottom: 10px;
      z-index: 200;
      padding: .3rem;
      width: 90%;
      transform: translateX(-50%);
      background-color: rgba(255, 255, 255, .95);
      border: 1px solid #e5e5e5;
      border-radius: .16rem;
      overflow: hidden;
      box-shadow: 0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px rgba(0, 0, 0, .14), 0 1px 10px rgba(0, 0, 0, .12);

      .footer-flex {
        display: flex;

        dd {
          img {
            width: .4rem;
            height: .4rem;
          }
        }

        .back-home {
          flex: 1;
          text-align: center;
          margin-left: -.18rem;
        }

        .shop-cart {
          flex: 1;
          text-align: center;

          dd {
            position: relative;

            .shop-cart-icon {
              position: relative;
              margin: 0 auto;
              width: .4rem;
              color: rgba(0, 0, 0, .54);

              .bubble {
                position: absolute;
                top: -.08rem;
                right: -.1rem;
                width: .28rem;
                height: .28rem;
                text-align: center;
                border-radius: 100%;
                background-color: red;
                color: white;
              }
            }
          }
        }

        .add-to-cart {
          flex: 4;
          text-align: center;
          line-height: 0.73rem;
          color: white;
          font-size: .28rem;
          background: #ff6700;
          border-radius: 50px;
        }
      }
    }
  }
</style>
